<template>
	<div>
		<el-card class="!border-none pt-4" shadow="never">
			<el-form class="ls-form el-set-form" :model="formData" inline>
				<el-form-item label="供应商名称">
					<el-input placeholder="请输入" v-model="formData.Number" clearable />
				</el-form-item>
				<el-form-item label="类型">
					<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select class="flex-1 ml-[10px]" multiple placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button class="main-color1 w-[76px]">重置</el-button>
					<el-button class="w-[76px]" type="primary" color="#0054A6">查询</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none pt-4 mt-[20px]" shadow="never">
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"> 
				<el-table-column label="流水号" prop="询价单" align="center" />
				<el-table-column label="申请日期" prop="上海AAAA有限公司" align="center" />
				<el-table-column label="供应商名称" prop="王小明" align="center" />
				<el-table-column label="总金额" prop="王小明" align="center" />
				<el-table-column label="已支付金额" prop="王小明" align="center" />
				<el-table-column label="剩余金额" prop="王小明" align="center" />
				<el-table-column label="状态" prop="王小明" align="center" />
				<el-table-column label="原因" prop="王小明" align="center" />
				<el-table-column label="操作" fixed="right" align="center">
					<template #default="{ row }">
						<el-button type="primary" link>
							<router-link :to="{
								        path: getRoutePath('financialManagement.financialManagement/StatementAudit'),
								        query: {
								            id: '1'
								        }
								    }">
								<span class="main-color1">对账审核</span>
							</router-link>
						</el-button>
						<el-button type="primary" link>
							<router-link :to="{
								        path: getRoutePath('financialManagement.financialManagement/lookCheck'),
								        query: {
								            id: '1'
								        }
								    }">
								<span class="main-color1">查看对账单</span>
							</router-link>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="p-[20px] v-flex v-row-right">
				<el-pagination color="#0054A6" background layout="prev, pager, next" :default-page-size="6"
					:total="1000" :pager-count="6" />
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import { getRoutePath } from '@/router'
	const formData = reactive({
		Number: '',
		type: '',
	})
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		},
	])
	const lists = ref<Array<any>>([
		{ type: '出库单' }, { type: '入库单' }, { type: '出库单' }
	])
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label {
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}

	.el-set-form:deep() .el-input__inner {
		height: 36px;
	}

	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}

	:deep() .el-dialog__title {
		color: var(--el-text-color-main);
	}

	:deep() .el-pagination.is-background .el-pager li.is-active {
		background-color: var(--el-text-color-main);
	}
</style>